<template>
	<div>
		<div>
			<el-form :inline="true" :model="queryObj" class="demo-form-inline">
				<el-form-item>
					<el-input v-model="queryObj.name" placeholder="请输入搜索关键字"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="info" icon="el-icon-search" @click="Query()"></el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="success" icon="el-icon-edit" circle @click="ofOpenAdd()"></el-button>
					<!-- 打开新增页面 -->
					<el-dialog title="新增" :visible.sync="dialogVisible" width="30%">
						<el-form :model="role" label-width="80px">
							<el-form-item label="名称">
								<el-input v-model="role.name"></el-input>
							</el-form-item>
							<el-form-item label="角色名称:">
								<el-input v-model="role.phone"></el-input>
							</el-form-item>
						</el-form>
						<span slot="footer" class="dialog-footer">
							<el-button @click="dialogVisible = false">取 消</el-button>
							<el-button type="primary" @click="openAdd">确 定</el-button>
						</span>
					</el-dialog>
				</el-form-item>
				<el-form-item>
					<el-button type="danger" icon="el-icon-delete" circle @click="deleteByIds()"></el-button>
				</el-form-item>
			</el-form>
		</div>
		<div>
			<div id="app">
				<el-table :data="roles" style="width: 100%;" ref="multipleTable" tooltip-effect="dark"
					@selection-change="handleSelectionChange">
					<!-- 全选框 -->
					<el-table-column type="selection" width="30">
					</el-table-column>
					
					<el-table-column prop="id" label="编号" width="200">
					</el-table-column>

					<el-table-column prop="name" label="姓名" width="200">
					</el-table-column>

					<el-table-column prop="nameZh" label="角色名称" width="300">
					</el-table-column>
					<el-table-column  label="操作" width="260">
						<template slot-scope="scope">
							<el-button type="primary" @click="openUpdate(scope.row)">编辑</el-button>
							<!-- 点击修改弹框，带有默认值-->
							<el-dialog title="修改" :visible.sync="dialogUpdate" width="30%">
								<el-form :model="role" label-width="80px">
									<el-form-item label="姓名:">
										<el-input v-model="role.name" readonly></el-input>
									</el-form-item>
									<el-form-item label="角色名称:">
										<el-input v-model="role.nameZh"></el-input>
									</el-form-item>
								</el-form>
								<span slot="footer" class="dialog-footer">
									<el-button @click="dialogUpdate = false">取 消</el-button>
									<el-button type="primary" @click="ofUpdate">确 定</el-button>
								</span>
							</el-dialog>
							<el-button type="danger" @click="DeleteData(scope.row.id)" plain>删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div>
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="queryObj.currentPage" :page-sizes="[3, 5, 10, 20]" :page-size="queryObj.sizePage"
						layout="total, sizes, prev, pager, next, jumper" :total="total">
					</el-pagination></div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {

				total: 20,

				//查询封装的参数
				queryObj: {
					name: "",
					currentPage: 1,
					sizePage: 3,
				},

				//修改弹框属性
				dialogUpdate: false,


				//表格中数据、由后端传入
				roles: [],

				//用户对象
				role: {
					id: '',
					name: '',
					nameZh: '',
				},

				//关于批量删除的id
				ids: [],

				//关于新增页面
				dialogVisible: false,
			}
		},
		methods: {
			
			/* 打开新增页面方法 */
			ofOpenAdd() {
				this.role.name = "";
				this.role.nameZh = "";
				this.dialogVisible = true;
			},
			
			//打开修改弹框，并赋予默认值
			openUpdate(row) {
				this.role.name = row.name;
				this.role.nameZh = row.nameZh;
				this.dialogUpdate = true;
			},
			
			//确定修改
			ofUpdate() {
				this.dialogUpdate = false;
			
				this.putRequest('/role/saveUpdate', this.role).then(result => {
					this.queryDate();
				});
			},
			
			/* 确定添加方法 */
			openAdd() {
				//关闭弹框
				this.dialogVisible = false;
				//console.log(this.student);
				this.postRequest('/role/save', this.role).then(result => {
					//console.log(result.code);
					this.queryDate();
				});
			},
			
			/* 删除单个数据*/
			DeleteData(id) {
				this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					console.log(id);
					//this.id=id;
					this.deleteRequest('/role/delOne/' + id).then(res => {
						if (this.total % this.queryObj.sizePage === 1) {
							this.queryObj.currentPage--;
						}
						this.queryDate();
					});
			
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			
			//复选框获取id,用于批量删除
			handleSelectionChange(val) {
				var idm = [];
				for (let roles of val) {
					idm.push(roles.id);
				}
				this.ids = idm;
				//console.log(this.ids);
			},
			
			/* 批量删除数据 */
			deleteByIds() {
				this.$confirm('此操作将永久删除选中记录, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					if (this.ids.length != 0) {
			
						this.deleteRequest('/role/delBatch', this.ids).then(result => {
							if (this.ids.length === this.roles.length) {
								this.queryObj.currentPage--;
							}
							this.queryDate();
						})
			
					} else {
						this.$message({
							type: 'info',
							message: '无选中记录！'
						});
					}
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			
			//页面加载完之后调用的方法
			queryDate() {
				this.postRequest('/role/likeQuery', this.queryObj).then(result => {
					//console.log(result.data);
					this.roles = result.data.roleList;
					this.total = result.data.total;
				})
			},

			// 分页用到的方法
			handleSizeChange(val) {

				console.log(`每页 ${val} 条`);
				this.queryObj.sizePage = val;
				this.queryDate();
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.queryObj.currentPage = val;
				this.queryDate();
			},

			/* 模糊查询 */
			Query() {
				this.queryDate();
			},
		},
		mounted() {
			this.queryDate();
		},
	}
</script>

<style>
</style>
